/**
 * SD-LoRA校园图片生成系统 - 侧边栏控制
 */

document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const sidebar = document.querySelector('.sidebar');
    const newChatBtn = document.getElementById('newChat');
    
    // 强制删除collapsed类，确保默认展开
    sidebar.classList.remove('collapsed');
    
    // 确保新对话按钮显示完整文本
    if (newChatBtn) {
        newChatBtn.innerHTML = '<i class="material-icons">add</i>新对话';
    }
    
    // 创建两个状态容器
    const expandedContainer = document.createElement('div');
    expandedContainer.className = 'sidebar-expanded-container';
    
    const collapsedContainer = document.createElement('div');
    collapsedContainer.className = 'sidebar-collapsed-container';
    
    // 将现有的子元素移动到展开容器中
    while (sidebar.firstChild) {
        expandedContainer.appendChild(sidebar.firstChild);
    }
    
    // 创建收缩状态的元素
    // 添加Logo到收缩容器
    const collapsedLogo = document.createElement('div');
    collapsedLogo.className = 'logo';
    if (expandedContainer.querySelector('.logo img')) {
        const logoImg = expandedContainer.querySelector('.logo img').cloneNode(true);
        collapsedLogo.appendChild(logoImg);
    }
    
    // 为收缩状态创建收缩按钮
    const collapsedToggleButton = document.createElement('button');
    collapsedToggleButton.className = 'sidebar-toggle';
    collapsedToggleButton.innerHTML = '<i class="material-icons">chevron_right</i>';
    collapsedToggleButton.title = '展开侧边栏';
    
    // 为收缩状态创建新对话按钮
    const collapsedNewChat = document.createElement('button');
    collapsedNewChat.className = 'new-chat-btn';
    collapsedNewChat.id = 'collapsedNewChat';
    collapsedNewChat.innerHTML = '<i class="material-icons">add</i>';
    
    // 将元素添加到收缩容器
    collapsedContainer.appendChild(collapsedLogo);
    collapsedContainer.appendChild(collapsedToggleButton);
    collapsedContainer.appendChild(collapsedNewChat);
    
    // 将两个容器添加到侧边栏
    sidebar.appendChild(expandedContainer);
    sidebar.appendChild(collapsedContainer);
    
    // 确保展开容器中有收缩按钮
    if (!expandedContainer.querySelector('.sidebar-toggle')) {
        const toggleButton = document.createElement('button');
        toggleButton.className = 'sidebar-toggle';
        toggleButton.innerHTML = '<i class="material-icons">chevron_left</i>';
        toggleButton.title = '收缩侧边栏';
        expandedContainer.appendChild(toggleButton);
        
        // 点击事件
        toggleButton.addEventListener('click', () => {
            toggleSidebar();
        });
    } else {
        // 如果按钮已存在，确保图标正确
        const toggleButton = expandedContainer.querySelector('.sidebar-toggle');
        toggleButton.innerHTML = '<i class="material-icons">chevron_left</i>';
        toggleButton.title = '收缩侧边栏';
    }
    
    // 为收缩状态的按钮添加事件
    collapsedToggleButton.addEventListener('click', () => {
        toggleSidebar();
    });
    
    collapsedNewChat.addEventListener('click', () => {
        if (window.chatModule && typeof window.chatModule.newChat === 'function') {
            window.chatModule.newChat();
        }
    });
    
    // 创建模式选择区域（如果不存在）
    if (!expandedContainer.querySelector('.mode-selector')) {
        // 创建模式选择容器
        const modeSelector = document.createElement('div');
        modeSelector.className = 'mode-selector';
        
        // 确定当前模式
        const currentPath = window.location.pathname;
        const currentMode = currentPath.includes('/draw') ? 'draw' : 'chat';
        
        // 创建对话生成按钮
        const chatButton = document.createElement('button');
        chatButton.className = 'mode-btn' + (currentMode === 'chat' ? ' active' : '');
        chatButton.id = 'chatModeBtn';
        chatButton.innerHTML = '<i class="material-icons">chat</i><span>对话生成</span>';
        chatButton.title = '切换到对话生成模式';
        
        // 创建智慧绘画按钮
        const drawButton = document.createElement('button');
        drawButton.className = 'mode-btn' + (currentMode === 'draw' ? ' active' : '');
        drawButton.id = 'drawModeBtn';
        drawButton.innerHTML = '<i class="material-icons">brush</i><span>智慧绘画</span>';
        drawButton.title = '切换到智慧绘画模式';
        
        // 添加点击事件
        chatButton.addEventListener('click', () => {
            switchMode('chat');
        });
        
        drawButton.addEventListener('click', () => {
            switchMode('draw');
        });
        
        // 将按钮添加到容器
        modeSelector.appendChild(chatButton);
        modeSelector.appendChild(drawButton);
        
        // 将模式选择器添加到侧边栏
        if (newChatBtn) {
            expandedContainer.insertBefore(modeSelector, newChatBtn.nextSibling);
        } else {
            expandedContainer.appendChild(modeSelector);
        }
    } else {
        // 如果模式选择器已存在，更新活跃状态
        const currentPath = window.location.pathname;
        const currentMode = currentPath.includes('/draw') ? 'draw' : 'chat';
        
        const chatButton = expandedContainer.querySelector('#chatModeBtn');
        const drawButton = expandedContainer.querySelector('#drawModeBtn');
        
        if (chatButton && drawButton) {
            if (currentMode === 'chat') {
                chatButton.classList.add('active');
                drawButton.classList.remove('active');
            } else {
                chatButton.classList.remove('active');
                drawButton.classList.add('active');
            }
        }
    }
    
    // 强制设置为展开状态
    localStorage.setItem('sidebarState', 'expanded');
});

/**
 * 切换侧边栏展开/收缩状态
 */
function toggleSidebar() {
    const sidebar = document.querySelector('.sidebar');
    
    if (sidebar.classList.contains('collapsed')) {
        // 展开侧边栏
        sidebar.classList.remove('collapsed');
        
        // 保存状态
        localStorage.setItem('sidebarState', 'expanded');
    } else {
        // 收缩侧边栏
        sidebar.classList.add('collapsed');
        
        // 保存状态
        localStorage.setItem('sidebarState', 'collapsed');
    }
}

/**
 * 切换模式
 * @param {string} mode - 模式（chat或draw）
 */
function switchMode(mode) {
    // 检查当前路径
    const currentPath = window.location.pathname;
    const currentMode = currentPath.includes('/draw') ? 'draw' : 'chat';
    
    // 如果当前模式与目标模式不同，则跳转页面
    if (mode !== currentMode) {
        // 构建URL
        let url = mode === 'chat' ? '/chat' : '/draw';
        
        // 检查是否正在查看历史对话
        const urlParams = new URLSearchParams(window.location.search);
        const isViewingHistory = urlParams.has('session_id');
        
        // 如果正在查看历史对话，则跳转到新页面
        // 如果不是查看历史，则保留当前会话
        if (!isViewingHistory) {
            // 保存当前会话ID
            let currentSessionId = null;
            if (window.chatModule && typeof window.chatModule.getCurrentSessionId === 'function') {
                currentSessionId = window.chatModule.getCurrentSessionId();
            }
            
            if (currentSessionId) {
                url += `?session_id=${currentSessionId}`;
            }
        }
        
        // 跳转到新页面
        window.location.href = url;
    }
}

// 修改新对话点击事件
document.addEventListener('DOMContentLoaded', () => {
    // 获取新对话按钮
    const newChatBtn = document.getElementById('newChat');
    const collapsedNewChatBtn = document.getElementById('collapsedNewChat');
    
    if (newChatBtn) {
        // 覆盖新对话按钮的点击事件
        newChatBtn.addEventListener('click', (e) => {
            e.preventDefault();
            // 检查当前页面类型
            const isDrawPage = window.location.pathname.includes('/draw');
            // 跳转到相同类型的新页面
            window.location.href = isDrawPage ? '/draw' : '/chat';
        });
    }
    
    if (collapsedNewChatBtn) {
        // 覆盖收缩状态下新对话按钮的点击事件
        collapsedNewChatBtn.addEventListener('click', (e) => {
            e.preventDefault();
            // 检查当前页面类型
            const isDrawPage = window.location.pathname.includes('/draw');
            // 跳转到相同类型的新页面
            window.location.href = isDrawPage ? '/draw' : '/chat';
        });
    }
});

// 修复生成图片后侧边栏大小变化的问题
document.addEventListener('DOMContentLoaded', () => {
    // 监听图片生成事件
    const originalHandleImageGeneration = window.handleImageGeneration;
    
    if (originalHandleImageGeneration && typeof originalHandleImageGeneration === 'function') {
        // 替换原始函数，在其运行后恢复侧边栏宽度
        window.handleImageGeneration = function(...args) {
            // 保存侧边栏当前状态
            const sidebar = document.querySelector('.sidebar');
            const isCollapsed = sidebar.classList.contains('collapsed');
            
            // 调用原函数
            const result = originalHandleImageGeneration.apply(this, args);
            
            // 确保侧边栏状态保持一致
            setTimeout(() => {
                if (isCollapsed) {
                    sidebar.classList.add('collapsed');
                } else {
                    sidebar.classList.remove('collapsed');
                }
            }, 100);
            
            return result;
        };
    }
    
    // 在窗口大小变化时保持侧边栏状态
    window.addEventListener('resize', () => {
        const sidebar = document.querySelector('.sidebar');
        const isCollapsed = sidebar.classList.contains('collapsed');
        const sidebarState = localStorage.getItem('sidebarState');
        
        // 如果localStorage和当前状态不一致，则以localStorage为准
        if (sidebarState === 'collapsed' && !isCollapsed) {
            sidebar.classList.add('collapsed');
        } else if (sidebarState === 'expanded' && isCollapsed) {
            sidebar.classList.remove('collapsed');
        }
    });
}); 